<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>MeteoCal</title>
    </h:head>
    <h:body>
        <h:form id="indexPage">
            <p:growl id="growl" showDetail="true" autoUpdate="true"/> 
            
            <p:layout fullPage="true">
                <p:layoutUnit class="layoutClass" position="north" size="88">
                    <div class="content">
                        <span class="siteName"> MeteoCal </span> 
                        <p:spacer width="600" height="10" />
                    
                        <p:commandLink value="Log in" oncomplete="PF('dlgLog').show();" 
                                       process="@this" style="color:white"/>
                        <p:spacer width="10" height="10" />
                        <p:link value="Sign in" outcome="register" style="color:white"/>
                    </div>
                </p:layoutUnit>
                <p:layoutUnit position="center">
                    <p:schedule id="schedule"  
                                class="schedule" aspectRatio="2.7"
                                leftHeaderTemplate="today"
                                centerHeaderTemplate="prev,title,next"
                                rightHeaderTemplate="month,agendaDay"
                                timeZone="GMT+1">
                    
                    </p:schedule>
                </p:layoutUnit>
            </p:layout>
        
        
            <p:dialog id="logDialog" header="Log in" widgetVar="dlgLog" showEffect="explode"                      
                      hideEffect="fade" position="top,right" resizable="false" style="width: auto;height: auto">
            
                <h:panelGrid id="panelLog" columns="2">
                    
                    <p:outputLabel for="username" value="Email"/>
                    <p:inputText id="username" value="#{loginBean.username}" 
                                 required="true" />
                    <p:outputLabel for="pass" value="Password"/>
                    <p:password id="pass" value="#{loginBean.password}" 
                                required="true" />
                    <p:commandButton id="submit" action="#{loginBean.login()}" value="Login" ajax="true"/>
                </h:panelGrid>
            </p:dialog>
        
        
        </h:form>
        <style type="text/css">
            
            @import url(http://fonts.googleapis.com/css?family=Bitter:400,700);
            
            .layoutClass .ui-layout-unit-content{
                background: -moz-linear-gradient(
                    top,
                    #6d84b4 0%,
                    #3b5998 100%);
                background: -webkit-gradient(
                    linear, left top, left bottom, 
                    from(#6d84b4),
                    to(#3b5998));
            }
            
            .layoutClass{
                background: -moz-linear-gradient(
                    top,
                    #6d84b4 0%,
                    #3b5998 100%);
                background: -webkit-gradient(
                    linear, left top, left bottom, 
                    from(#6d84b4),
                    to(#3b5998));
            }
            
            .schedule{
                width:available;
            }
            
            .content{
                text-align: center;
                color: white;
                font-family:Helvetica,Arial;
            }
            
            .siteName:before{
                content:"MeteoCal";
                position:absolute;
                color: rgba(0,0,0,.3);
            }

            .siteName {
                margin: 10px auto;
                text-align: center;
                text-shadow: -1px 1px 0px rgba(255,255,255,0.1), 1px -1px 0px rgba(0,0,0,0.4);
                color: #444;
                font: 700 50px 'Bitter';
            }
            
        </style>
        
        
    </h:body>
</html>

